<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">

    <title>试卷</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        #app{
            background-color: #d0d5d8;
        }
    </style>
</head>
<body>
<div id="app" style="padding: 100px">
    <p>{{results.title}}</p>
    <br>
    <br>
    <div v-for="i in results.questions.length" v-bind:id="'d'+results.questions[i-1].questionId" style="background: gray;float: left;border-radius: 50%;width: 35px;height: 30px;color: white;text-align: center;padding-top: 5px" >
        {{i}}
    </div>
    <br>
    <br>
    <hr>
    <div v-if="question.display==1">
        <p>{{(now+1)+'、'+question.content[0]}}</p>
        <div v-for="i in question.content.length-1">
            <label><input type="radio"  v-bind:name="qName" v-bind:value="question.content[i].replace(/^\s*/g,'').substr(0,1)">{{question.content[i]}}</label>
        </div>
    </div>
    <div v-else-if="question.display==2">
        <p>{{(now+1)+'、'+question.content[0]}}</p>
        <div v-for="i in question.content.length-1">
            <label><input type="checkbox" id="answer"  v-bind:name="qName" v-bind:value="question.content[i].substr(0,1)">{{question.content[i]}}</label>
        </div>
    </div>
    <div v-else-if="question.display==3">
        <p>{{(now+1)+'、'+question.content[0]}}</p>
        <label>答:</label><input type="text" v-bind:name="qName">
    </div>

    <div style="position: absolute;top: 700px;left: 100px">
        <button @click="pre">上一题</button>
        <button @click="next">下一题</button>
        <button @click="submit">提交</button>
        <button @click="collectionQuestion">收藏题目</button>
        <br>
    </div>
</div>


<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            examId:0,
            results:{},
            question:{},
            now:0,
            qName:"",
            score:{},
            totalScore:0,
            myAnswer:{}
        },
        mounted:function () {
            let that=this
            that.examId=$.getUrlParam("examId")
            $.ajax({
                type:"GET",
                url:"/question/searchExam/"+that.examId,
                success:function (results) {
                    console.log(results)
                    that.results=results.data
                    that.question=that.results.questions[that.now]
                    that.qName="q"+that.question.questionId
                    $("#d"+that.question.questionId)[0].style.background="green"

                }
            })

        },
        methods:{
            next:function () {
                let that = this
                $("#d" + that.question.questionId)[0].style.background = "#5cb85c"
                let str
                if (that.question.display == 1) {
                    str = $("input[name=" + that.qName + "]:checked").val()
                } else if (that.question.display == 2) {
                    $("input[name=" + that.qName + "]:checked").each(function () {
                        str += $(this).val() + "@@"
                    })
                } else if (that.question.display == 3) {
                    str = $("input[name=" + that.qName + "]").val().replace(";", "@@").replace("；", "@@")
                }

                that.myAnswer[that.qName] = str
                let tempQname = that.qName
                $.ajax({
                    type: "GET",
                    url: "/question/score/check?qId=" + that.qName + "&myAnswer=" + str,
                    success: function (result) {
                        that.score[tempQname] = result

                    }

                })

                that.now = that.now + 1
                if (that.now >= that.results.questions.length) {
                    alert("没有下一题了")
                    that.now = that.now - 1
                }

                that.question = that.results.questions[that.now]
                that.qName = "q" + that.question.questionId
                $("#d" + that.question.questionId)[0].style.background = "green"
                // $("input[name=" + that.qName + "]:checked").prop("checked",false)
                // let i
                // if (that.question.display === 1) {
                //     for(i in ){
                //         if(i.value===that.myAnswer[that.qName])
                //             i.prop("checked",true)
                //         else
                //             i.prop("checked",false)
                //     }
                // }
            },
            pre:function () {
                let that=this

                $("#d"+that.question.questionId)[0].style.background="#5cb85c"
                that.now=that.now-1
                if(that.now<0){
                    alert("没有上一题了")
                    that.now=that.now+1
                }

                that.question=that.results.questions[that.now]
                that.qName="q"+that.question.questionId
                $("#d"+that.question.questionId)[0].style.background="green"
            },
            submit:function () {
                let that=this


                for(s in that.score){
                    if(that.score[s]==0){

                        $("#d"+s.replace("q",""))[0].style.background="red"
                    }
                    that.totalScore=that.totalScore+that.score[s]
                }
                that.totalScore=that.totalScore*100/that.results.questions.length
                $.ajax({
                    type:"POST",
                    url:"/question/search/generate/createExam",
                    success:function (r) {
                        $.ajax({
                            type:"GET",
                            url:"/question/history/add?totalScore="+that.totalScore,
                            success:function (e) {

                            }
                        })
                    }
                })

            },
            collectionQuestion:function () {
                let that=this
                $.ajax({
                    type:"POST",
                    url:"/collections/questionCollection/add?questionId="+that.question.questionId,
                    success:function (e) {
                        alert("收藏成功")
                    }
                })
            }

        }
    })
</script>
</body>
</html>